import React, { Component } from 'react';
import { Table,Button,Form,Row,Col,Input,Card,Divider,Pagination,Icon } from 'antd'
import { connect } from 'react-redux'


import { fetch } from '../../redux/table.redux'

const FormItem = Form.Item

@connect(state=>state.table, {fetch})
class MyTable extends Component {

    componentDidMount() {
        this.props.fetch()
    }

    handleTableChange=(pagination, filters, sorter)=>{
        this.props.fetch({
            'page':pagination.current,
            'size':pagination.pageSize
        })
    }

    render() {
        const column=[{
            title:'名称',
            dataIndex:'name',
            key:'name',
            render: text=><a href="javascript:void(0);">{text}</a>
        },{
            title:'出生日期-年龄',
            dataIndex:'birth',
            key:'birth',
            render:text=>{
                const birth = new Date(text).getFullYear()
                const current = new Date().getFullYear();
                let age = current - birth;
            return <span>{text}({age})</span>
            }
        },{
            title:'手机号码',
            dataIndex:'phone',
            key:'phone'
        },{
            title:'qq',
            dataIndex:'qq',
            key:'qq'
        },{
            title:'邮箱',
            dataIndex:'email',
            key:'email'
        },{
            title:'所在地',
            key:'add',
            render:(text,record)=>(
                <span>中国,{record.province},{record.city}</span>
            )
        },{
            title:'详细地址',
            dataIndex:'address',
            key:'address'
        },{
            title:'操作',
            key:'action',
            render:(text, record)=>(
                <span>
                    <a type="primary">操作</a>
                    <Divider type="vertical" />
                    <a type="warning">删除</a>
                </span>
            )
        }]
        return (
            <div>
                <Form  style={{marginBottom:"20px"}}>
                    <Row gutter={24}>
                        <Col span={8}>
                            <FormItem label='名称' labelCol={{span:3}} wrapperCol={{span:20}}>
                                <Input placeholder="placeholder" />
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label='出生日期' labelCol={{span:3}} wrapperCol={{span:20}}>
                                <Input placeholder="placeholder" />
                            </FormItem>
                        </Col>
                        <Col span={8}>
                            <FormItem label='手机号码' labelCol={{span:3}} wrapperCol={{span:20}}>
                                <Input placeholder="placeholder" />
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Button type="danger" ghost>删除</Button><Divider type="vertical" />
                            <Button type="primary" ghost>添加</Button>
                        </Col>
                        <Col span={12} style={{textAlign:'right'}}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                        重置
                        </Button>
                        </Col>
                    </Row>
                </Form>
                <Table dataSource={this.props.data} columns={column} 
                pagination={this.props.pagination}
                loading={this.props.load}
                onChange={this.handleTableChange}
                />
            </div>
        )
    }
}

export default MyTable